<template>
  <div class="app-container documentation-container">
    <div class="top">
      <ul>
        <el-form
          ref="ruleForm"
          :rules="rules"
          :label-position="labelPosition"
          label-width="100px"
          :model="formLabelAlign"
        >
          <li class="left_">
            <div class="grid-content bg-purple">
              <el-form-item label="产品模板">
                <el-select v-model="formLabelAlign.type" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="产品名称" prop="ename">
                <el-input v-model="formLabelAlign.ename" width="100" />
              </el-form-item>
              <el-form-item label="产品编号" prop="enumber">
                <el-input v-model="formLabelAlign.enumber" />
              </el-form-item>
              <el-form-item label="产地">
                <el-input v-model="formLabelAlign.origin" />
              </el-form-item>
              <el-form-item label="位置序号">
                <el-input v-model="formLabelAlign.order" />
              </el-form-item>
            </div>
          </li>
          <li class="right_">
            <div class="grid-content bg-purple-light">
              <el-form-item label="手机视频监控">
                <el-input v-model="hisval" />
                <el-button type="primary" size="mini" plain @click="addMonitor('his')">添加</el-button>
                <el-button type="success" size="mini" plain @click="SeeMonitor('his')">查看</el-button>
              </el-form-item>
              <el-form-item label="PC视频监控">
                <el-input v-model="rtmpval" />
                <el-button type="primary" size="mini" plain @click="addMonitor('rtmp')">添加</el-button>
                <el-button type="success" size="mini" plain @click="SeeMonitor('rtmp')">查看</el-button>
              </el-form-item>
              <el-form-item label="关联购买链接">
                <el-input v-model="formLabelAlign.paylink" />
              </el-form-item>
              <el-form-item label="关联传感器">
                <el-input v-model="formLabelAlign.sensor" />
              </el-form-item>
            </div>
          </li>
        </el-form>
      </ul>
    </div>
    <div class="sub_mit">
      <el-button type="primary" class="sub_button" @click.native="onSubmit">{{ textval }}</el-button>
      <el-button v-if="submit" type="success" class="sub_button" @click.native="onImage">添加图片</el-button>
      <el-button v-if="submit" type="warning" class="sub_button" @click.native="onintroduction">添加企业介绍</el-button>
    </div>

    <el-dialog title="添加企业图片" width="70%" :visible.sync="dialogTableVisible">
      <el-form :label-position="labelPosition" label-width="100px">
        <!--HOMEGOODSIMAGE-->
        <el-form-item label="身份证正面">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :before-upload="Homegoods"
          >
            <img v-if="Homegoodsimg" :src="Homegoodsimg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="产品图片">
          <el-upload
            class="upload-demo"
            action=""
            :before-upload="beforeUpload"
            :before-remove="handleRemove"
            name="image"
            :file-list="fileList"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="添加企业介绍" width="70%" :visible.sync="qiye">
      <tinymce v-model="content" :goodsid="IDother" :height="300" />

      <el-button size="small" type="primary" @click.native="addqiyejies">添加</el-button>
    </el-dialog>
    <el-dialog title="链接地址" width="70%" :visible.sync="Monitorflag">
      <el-table :data="MonitorData">
        <el-table-column property="link" label="链接地址" width="280" />
        <el-table-column property="address" label="操作">
          <template slot-scope="scope">
            <el-button type="success" size="mini" plain @click.native="deleteMonitor(scope.$index, MonitorData)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import addimg from 'cs/addimg/addimage'
import Tinymce from '@/components/Tinymce'
import {
  mapGetters
} from 'vuex'

export default {
  components: {
    addimg,
    Tinymce,
    mapGetters
  },
  props: {},
  data() {
    return {
      Homegoodsimg: '', // 商品首页图片
      // 图片
      canCrop: false,
      /* 测试上传图片的接口，返回结构为{url:''}*/
      uploadUrl: this.$ENV.TRACING + this.$ENV.GOODS + this.IDother + this.$ENV.QIYEJIESAOIMAGE,
      pathName: '',
      content: '',
      //
      textval: '注册',
      MonitorData: [], // 临时存放监控数据
      Monitorflag: false, // 监控列表弹框
      rtmpval: '', // pc监控
      hisval: '', // 手机监控
      Monitortype: '', // 监控是查看手机 1 还是查看PC 2 链接
      qiye: false,
      submit: false,
      content: '',
      dialogTableVisible: false,
      IDother: '', // ID
      imgval: {},
      labelPosition: 'right',
      formLabelAlign: {
        ename: '', // 名称
        enumber: '', // 编号
        type: '1', // 类型 1养殖 2种植
        rtmp: [], // pc监控地址
        his: [], // 手机监控地址
        origin: '', // 产地
        order: '', // 序号
        status: '1', // 1启用 2停用
        paylink: '', // 购买链接
        sensor: '' // 关联传感器
      },
      rules: {
        ename: [
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ],
        enumber: [
          { required: true, message: '请输入产品编号', trigger: 'blur' }
        ]
      },
      options: [{
        value: '1',
        label: '养殖'
      }, {
        value: '2',
        label: '种植'
      }],
      fileList: []
    }
  },
  watch: {},
  methods: {
    Homegoods(file) { // 首页商品图片
      if (this.$oneselfFn.IMAGEVAL(file)) {
        this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.$ENV.GOODS + this.IDother + this.$ENV.HOMEGOODSIMAGE, file }).update(
          (ref) => {
            if (ref.status == 200) {
              this.Homegoodsimg = ref.data.imageURL + '/' + ref.data.imagePath
            }
          }, (res) => {
            console.log(res)
          })
      }
      return false
    },
    addqiyejies() { // 添加企业介绍
      const data = {
        'id': this.IDother,
        'upload': {
          'rember': this.content
        }
      }
      this.$apifn.EdithGoods(data).then((ref) => {
        if (ref.data.Response.code == 200) {
          this.$message({
            message: '企业介绍添加成功',
            type: 'success'
          })
        }
      }).catch((res) => {

      })
    },
    beforeUpload(file) { // 添加图片
      if (this.$oneselfFn.IMAGEVAL(file)) {
        this.$imgFn.seend({
          'path': this.$ENV.TRACING + this.$ENV.GOODS + this.IDother + this.$ENV.GOODSIMAGE,
          file
        }).addimg(
          (ref) => {
            if (ref.status == 200) {
              this.fileList.push({
                name: file.name,
                url: ref.data.imageURL + '/' + ref.data.imagePath
              })
            }
          }, (res) => {
            // console.dir(res.request)
            if (res.request.status == 500) {
              this.$notify({
                title: '警告',
                message: '请上传标准图片格式',
                type: 'warning'
              })
            }
          })
      } else {
        this.$notify({
          title: '警告',
          message: '图片大小不能超过2M',
          type: 'warning'
        })
      }
      return false
    },
    handleRemove(file, fileList) { // 证书删除
      if (file && file.status === 'success') {
        console.log(file)
        this.$imgFn.seend({ 'pathimg': fileList[0].url.slice(28) }).deleteimg(
          (ref) => {
            if (ref.status == 200) {
              if (ref.data.code == 200) {
                this.$notify({
                  title: ref.data.Massage,
                  type: 'success'
                })
                this.fileList = fileList
              }
            }
          }, (res) => {
            console.log(res)
          })
      }
    },
    inputval(val) { // 获取图片参数
      this.imgval = val
    },
    onSubmit() { // 添加产品
      if (this.qiyeenterprise.id) {
        const data = {
          'id': this.IDother,
          'upload': this.formLabelAlign
        }
        this.$apifn.EdithGoods(data).then((ref) => {
          if (ref.data.Response.code == 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }
        }).catch((res) => {

        })
      } else {
        this.formLabelAlign.rtmp = JSON.stringify(this.formLabelAlign.rtmp)
        this.formLabelAlign.his = JSON.stringify(this.formLabelAlign.his)
        this.$apifn.AddGoods(this.formLabelAlign).then((ref) => {
          if (ref.data.Response.code == 200) {
            this.IDother = ref.data.Response.data.id.toString()
            this.submit = true
            this.$message({
              message: '添加产品成功,请继续',
              type: 'success'
            })
          }
        }).catch((res) => {

        })
      }
    },
    addMonitor(val) { // 添加监控
      switch (val) {
        case 'his': // 手机
          if (this.hisval == '') {
            this.$message({
              message: '警告手机监控链接不能为空哦',
              type: 'warning'
            })
            return false
          }
          this.formLabelAlign.his.push({ 'link': this.hisval })
          this.hisval = ''
          break
        case 'rtmp': // pc
          if (this.rtmpval == '') {
            this.$message({
              message: '警告PC监控链接不能为空哦',
              type: 'warning'
            })
            return false
          }
          this.formLabelAlign.rtmp.push({ 'link': this.rtmpval })
          this.rtmpval = ''
          break
      }
    },
    SeeMonitor(val) { // 查看监控
      switch (val) {
        case 'his': // 手机
          if (this.formLabelAlign.his.length > 0) {
            this.Monitortype = '1'
            this.MonitorData = this.formLabelAlign.his
            this.Monitorflag = true
          } else {
            this.$message({
              message: '警告哦，您还没有添加手机监控链接哦',
              type: 'warning'
            })
          }
          break
        case 'rtmp': // pc
          if (this.formLabelAlign.rtmp.length > 0) {
            this.Monitortype = '2'
            this.MonitorData = this.formLabelAlign.rtmp
            this.Monitorflag = true
          } else {
            this.$message({
              message: '警告哦，您还没有PC监控链接哦',
              type: 'warning'
            })
          }
          break
      }
    },
    deleteMonitor(index, rows) { // 删除链接
      rows.splice(index, 1)
      switch (this.Monitortype) {
        case '1': // 手机
          this.formLabelAlign.his = rows
          break
        case '2': // PC
          this.formLabelAlign.rtmp = rows
          break
      }
    },
    onImage() { // 添加图片
      this.dialogTableVisible = true
    },
    onintroduction() { // 添加企业介绍
      this.qiye = true
    },
    GET_IMG() { // 获取所有图片
      this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.$ENV.GOODS + this.IDother + this.$ENV.GOODSIMAGE }).select(
        (ref) => {
          if (ref.status == 200) {
            const data = this.$oneselfFn.ImageHandlefunction(ref.data)
            if (data != {}) {
              if (data.GoodsImage) {
                data.GoodsImage.forEach((item, key) => {
                  this.fileList.push({
                    'name': key + 1,
                    'url': item
                  })
                })
              }
            }
          }
        }, (res) => {
          // console.log(res)
        }
      )
    },
    GET_Home_IMG() {
      this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.$ENV.GOODS + this.IDother + this.$ENV.HOMEGOODSIMAGE }).select(
        (ref) => {
          if (ref.status == 200) {
            this.Homegoodsimg = this.$ENV.UPLOADIMG + ref.data[0]
            console.log(this.$ENV.UPLOADIMG + ref.data[0])
          }
        }, (res) => {

        }
      )
    }
  },
  computed: {
    ...mapGetters([
      'qiyeenterprise'
    ])
  },
  created() {
    if (this.qiyeenterprise.id) {
      // console.log(this.qiyeenterprise);
      this.content = this.qiyeenterprise.rember
      // this.rember
      this.textval = '修改'
      this.formLabelAlign = this.qiyeenterprise
      this.IDother = this.qiyeenterprise.id.toString()
      this.submit = true
      this.GET_Home_IMG()
      this.GET_IMG()
    }
  },
  mounted() {
    // console.log(this.$ENV.IDPOSITIVE);
    // 生命周期
  }
}
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .app-container {

  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }

  }

  /*手机*/
  @media screen and (min-width: 100px) and (max-width: 960px) {
    .top {
      width: 100%;
      /*height:147px;*/

    }

    .top ul {

    }

    .top ul li {

    }
  }

  /*PC*/
  @media screen and (min-width: 960px) and (max-width: 1900px) {
    .top {
      width: 100%;
      height: 320px;
    }

    .top ul {
      width: 100%;
      height: 100%;
    }

    .top ul li {
      float: left;
    }

    .left_ {
      width: 41%;
    }

    .right_ {
      width: 41%;
      margin-left: 10%;
    }

    .sub_mit {
      width: 80%;
      height: 50px;
      margin: auto;
    }

    .sub_button {
      /*float: right;*/
    }
  }

  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }

  .bg-purple {
    /*background: #d3dce6;*/
  }

  .bg-purple-light {
    /*background: #e5e9f2;*/
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

</style>
